<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span='1.5'>
                <el-button type="primary" plain icon='el-icon-plus' size='mini' @click="addSource">新增</el-button>
            </el-col>
        </el-row>
        <Table :list='list' :loading='loading' :tableColumns='tableColumns' ></Table>
        <pagination  v-show="total>0"  :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="shareOrderHanlder"  />

        <el-dialog title='新增数据源' :visible.sync="open" width="500px" append-to-body>
            <el-form ref='form' :model="form" :rules="rules" label-width="100px">
                <el-form-item label="商品选择">
                    <el-select v-model="form.infoGoodsId">
                        <el-option value="2579" label="【经理】升级通道A-3999" ></el-option>
                        <el-option value="2604" label="【经理】升级通道B-4999" ></el-option>
                        <el-option value="2580" label="【经销商】升级通道-20000" ></el-option>
                        <el-option value="2581" label="【经销商】升级通道-30000" ></el-option>
                    </el-select>
                    <!-- <el-input v-model="form.infoGoodsId" placeholder="请输入商品" /> -->
                </el-form-item>
                <el-form-item label="手机号" prop='buyerMobile'>
                    <el-input v-model="form.buyerMobile" placeholder="请输入手机号" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Table from '@/views/components/myTable'
import { getShareOrders,postShareOrders } from '@/api/ka/ka'
export default {
    components:{
        Table
    },
    data() {
        return{
            loading:false,
            open:false,
            form:{
                infoGoodsId:'',
                buyerMobile:''
            },
            tableColumns:[
                {label:'ID',param:'id'},
                {label:'手机号',param:'buyerMobile'},
                {label:'商品ID',param:'infoGoodsId'},
                {label:'商品名称',param:'infoGoodsName'},
                {label:'isShare',param:'isShare'},
                {label:'订单ID',param:'orderId'},
                {label:'订单金额',param:'orderMoney'},
                {label:'支付时间',param:'payTime'},
                {label:'创建时间',param:'createdAt'},
            ],
            list:[],
            total:0,
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            rules:{
                buyerMobile:[{required: true, message: "手机号不能为空", trigger: "blur"},
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ],
            },
        }
    },
    created(){
        this.shareOrderHanlder()
    },
    methods:{
        //数据初始化
        shareOrderHanlder(){
            let data = this.addDateRange(this.queryParams)
            getShareOrders(data).then(res=>{
                if(res.data.code == 200){
                    this.list = res.data.rows
                    this.total = res.data.total
                }
            })
        },
        //新增
        addSource(){
            this.open = true
            this.form = {
                infoGoodsId:undefined,
                buyerMobile:undefined,
            }
        },
        //确定
        submitForm(){
            this.$refs["form"].validate(valid=>{
                if(valid){
                    postShareOrders(this.form).then(res=>{
                        this.msgSuccess("新增成功");
                        this.open =  false;
                        this.shareOrderHanlder()
                    })
                }
            })
        },
        //取消
        cancel(){
            this.open= false;
            this.form = {
                infoGoodsId:undefined,
                buyerMobile:undefined,
            }
        },
    }
}
</script>
<style scoped>

</style>